<template>
  <view class="cs-tag-list">
    <scroll-view scroll-x scroll-with-animation style="white-space: nowrap" class="mt-2 mb-2">
      <CsTag
        v-for="(category, categoryIndex) in categoryList"
        round
        type="primary"
        :key="categoryIndex"
        :is-active="selectCategoryId === category.id"
        :class="'category-tag'"
        @click="emit('click', category, 'category')"
      >
        {{ category.title }}
      </CsTag>
    </scroll-view>

    <view
      class="sub-category"
      v-if="find(categoryList, { id: selectCategoryId })?.children?.length"
    >
      <wd-divider custom-class="is-full" />
      <scroll-view scroll-x scroll-with-animation style="white-space: nowrap" class="mt-2 mb-2">
        <CsTag
          v-for="(subCategory, subCategoryIndex) in find(categoryList, {
            id: selectCategoryId,
          })?.children"
          round
          is-small
          :key="subCategoryIndex"
          :is-active="selectSubCategoryId === subCategory.id"
          :class="'category-tag'"
          @click="emit('click', subCategory, 'subCategory')"
        >
          {{ subCategory.title }}
        </CsTag>
      </scroll-view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { find } from 'lodash'
import { CsGridItem } from '../cs-btn-grid/cs-btn-grid.types'
import CsTag from '../cs-tag/cs-tag.vue'

defineOptions({
  name: 'cs-tag-list',
  options: {
    addGlobalClass: true,
    virtualHost: true, // page con't use this
    styleIsolation: 'shared',
  },
})

const props = defineProps<{
  categoryList: CsGridItem[]
  selectCategoryId?: string
  selectSubCategoryId?: string
}>()

const selectCategoryId = toRef(props, 'selectCategoryId')
const selectSubCategoryId = toRef(props, 'selectSubCategoryId')

const emit = defineEmits<{ click: [item: CsGridItem, type: 'category' | 'subCategory'] }>()
</script>

<style lang="scss" scoped>
.category-tag + .category-tag {
  margin-left: 0.5rem;
}
</style>

<style lang="scss">
.is-full .wd-divider__content {
  display: none;
}
</style>
